<template>
  <div class="line-container">
    <ve-line :data="chartData" :extend="extend" height="350px" ></ve-line>
  </div>
</template>

<script>
import echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据
export default {
  data() {
    this.extend = {
      legend: {
        show: false
      },
      grid:{
          top:"0%",
          width:"117%",
          left:"-15%"
      },
      color: ["#4ebaff", "#b851ff"],
      xAxis: {
        show: false
      },
      yAxis: {
        show: false
      },
      tooltip: {
        show: false,
        backgroundColor: "#fff",
        textStyle: {
          color: "#000"
        },
        extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);"
      },
      series: {
        symbol: "none",
        smooth: false,
        symbolSize: 15,
        areaStyle: {
          x: 0,
          y: 0.5,
          x2: 0,
          y2: 1,
          origin: "start",
          opacity: 0.09
        }
      }
    };
    return {
      chartData: {
        columns: ["日期", "访问用户"],
        rows: [
          { 日期: "1/1", 访问用户: 1393 },
          { 日期: "1/2", 访问用户: 3530 },
          { 日期: "1/3", 访问用户: 2923 },
          { 日期: "1/4", 访问用户: 1723 },
          { 日期: "1/5", 访问用户: 3792 },
          { 日期: "1/6", 访问用户: 6593 },
          { 日期: "1/7", 访问用户: 2593 },
          { 日期: "1/8", 访问用户: 1593 },
          { 日期: "1/9", 访问用户: 1432 },
          { 日期: "1/10", 访问用户: 1753 },
          { 日期: "1/11", 访问用户: 2133 },
          { 日期: "1/12", 访问用户: 1953 }
        ]
      }
    };
  }
};
</script>


<style lang="scss" scoped>
.line-container {
  padding-top: 20px;
  width: 100%;
}
</style>
